<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-2</title>
    <style>
        .bigdiv {
            height: 300px;
            width: 600px;
            background-color: rgba(255, 255, 255, 0.979);
            margin: 30px auto;
        }
        
        body {
            background-color: rgb(196, 186, 186);
        }
        
        p {
            font-size: 30px;
            text-align: center;
            /*  align-content: ;不可 */
            /*  background-color: yellow; */
        }
        
        a {
            text-decoration: none;
            /* text-align: center;这个不起作用，因为a是行内元素，与块元素p不同，
            这个属性是元素中的文本居中，a标签中的文本左右本来就没有空位 */
            /*  background-color: red; */
            /*  不熟悉的属性不能乱用，先查下，MDN比W3好 */
        }
        
        .smalldiv {
            height: 100px;
            width: 600px;
            /* background-color: pink; */
            text-align: center;
        }
        
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div class="bigdiv">
        <p>提交成功</p>
        <div class="smalldiv">
            <a href="#"><span></span> 秒后系统会自动跳转，也可单击此链接跳转</a>
        </div>
    </div>
    <script>
        var second = document.querySelector('span');
        var flat = 5;
        var time = window.setInterval(function() {
            second.innerHTML = flat;
            flat--;
        }, 1000);
        window.setTimeout(function() {
            time.close;
            clearInterval(time);
            window.location = "8-2(2).html";
        }, 6000)
    </script>
</body>

</html>